<template>
  <!-- 一上来显示数据的模块 -->
  <el-card style="padding: 10px" v-show="CategoryStore.Addshow">
    <el-button type="primary" :icon="Plus" @click="addAttributeFunction"
      :disabled="CategoryStore.category3Id === undefined" style="margin-bottom: 20px">添加属性
    </el-button>
    <el-table :data="AttributesAttr" border style="width: 100%">
      <el-table-column type="index" label="序号" width="60" align="center" />
      <el-table-column prop="attrName" label="属性名" width="180" />
      <el-table-column label="属性值列表" width="700">
        <template v-slot="{ row }">
          <el-tag style="margin-right: 5px" type="success" v-for="item in row.attrValueList" :key="item.id">
            {{ item.valueName }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column>
        <template v-slot="{ row }">
          <el-button type="warning" :icon="Edit" size="small" @click="trademarkRevise(row)" />
          <el-popconfirm confirm-button-text="确定" cancel-button-text="取消" :icon="InfoFilled" icon-color="#626AEF"
            title="确定删除分类吗?" @confirm="confirmEvent(row)" @cancel="cancelEvent">
            <template #reference>
              <el-button type="danger" :icon="Delete" size="small" />
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
  </el-card>

  <!-- 添加功能的页面 -->
  <el-card style="padding: 10px" v-show="!CategoryStore.Addshow">
    <!-- <div class="card-header">
      <span>Card name</span>
      <el-input class="w-50 m-2">Operation button</el-input>
    </div> -->
    <div class="DownMargin">
      <el-space wrap>
        <span>属性名</span>
        <el-input style="width: 250px" placeholder="请输入属性名字" v-model="AttributesName"></el-input>
      </el-space>
    </div>
    <div class="DownMargin">
      <el-button type="primary" @click="addAttributeValue" :disabled="AttributesName == ''">添加属性值</el-button>
      <el-button @click="CategoryStore.Addshow = true">取消</el-button>
    </div>
    <el-table :data="tableData.attrValueList" style="width: 100%" class="DownMargin">
      <el-table-column type="index" label="序号" width="60" align="center" />
      <el-table-column label="属性名称" prop="valueName">
        <template v-slot="{ row,$index }">
          <el-input ref="Input" @blur="loseFocus(row,$index)" v-model="row.valueName" v-if="row.isEdit">
          </el-input>
          <span v-else @click="showEdit(row)" class="spanwidth">{{row.valueName}}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template v-slot="{ $index }">
          <el-popconfirm confirm-button-text="确定" cancel-button-text="取消" :icon="InfoFilled" icon-color="#626AEF"
            title="确定删除分类吗?" @confirm="confirmEventInside($index)" @cancel="cancelEventInside">
            <template #reference>
              <el-button type="danger" :icon="Delete" size="small" />
            </template>
          </el-popconfirm>
        </template>

      </el-table-column>
    </el-table>

    <div>
      <!-- :disabled="tableData.attrValueList.length == 0 || AttributesName == ''" -->
      <el-button type="primary" @click="savData"
        :disabled="tableData.attrValueList.length == 0 || AttributesName == ''">保存</el-button>
      <el-button @click="CategoryStore.Addshow = true">取消</el-button>
    </div>
  </el-card>
</template>

<script lang="ts">
export default {
  name: "CategoryTableExhibit",
};
</script>

<script lang="ts" setup>
import { watch, ref, reactive, onUpdated, nextTick, onMounted } from "vue";
import { Plus, Edit, Delete, InfoFilled } from "@element-plus/icons-vue";
import { useCategoryStore } from "@/stores/category";
import {
  getAttributesAttr,
  addAttributesAttr,
  reviseAttributesAttr,
  deleteAttributesAttr,
} from "@/Api/product/attr";
import type {
  getAttributesListArry,
  getAttributesList,
  tableDataoArr,
  attrValueListobj,
} from "@/Api/product/model/attr";
import type { addattrValueListobj } from "@/Api/product/model/attr";

const CategoryStore = useCategoryStore();

// 组件挂载挂载的时候  看3级id是否有  有的话就请求渲染
onMounted(() => {
  if (CategoryStore.category3Id) sendRequest();
})

const trademarkRevise = (row: tableDataoArr) => {
  functionalJudgment.value = false;
  CategoryStore.Addshow = false;
  AttributesName.value = row.attrName;
  tableData.attrName = row.attrName;
  tableData.attrValueList = row.attrValueList;
  tableData.categoryId = row.categoryId;
  tableData.categoryLevel = row.categoryLevel;
  tableData.id = row.id;
  // const tableData = reactive<tableDataoArr>({
  //   attrName: '',
  //   attrValueList: [
  //     // {
  //     //   attrId: 0,
  //     //   valueName: '',
  //     //   id: 0
  //     // }
  //   ],
  //   categoryId: 0,
  //   categoryLevel: 3,
  //   id: 0
  // });
};

// 添加属性内部中的 删除的确定和取消事件
const confirmEventInside = (idnex: number) => {
  tableData.attrValueList.splice(idnex, 1)
};
const cancelEventInside = () => {
  return
};

// 添加功能显示的 添加组件的布尔值 判断

// 这是添加修改页面 获取input框数据的 双向数据绑定的数据
const AttributesName = ref("");

// attrName: string,
//   attrValueList: attrValueListts,
//   categoryId: number,
//   categoryLevel: number,
//   id: number

// table表单中的数据
const tableData = reactive<tableDataoArr>({
  attrName: "",
  attrValueList: [
    // {
    //   attrId: 0,
    //   valueName: '',
    //   id: 0
    // }
  ],
  categoryId: 0,
  categoryLevel: 3,
  id: 0,
});

// 显示table里面显示input还是数据渲染
// const inputShow = ref(true)

// Input 自动获取焦点
const Input = ref();

// 添加修改的属性值数据 第二个input 双向数据绑定
const attributData = ref("");

// 定义一个布尔值  让页面知道是添加 还是修改功能额
const functionalJudgment = ref(true);

// 定义一个数据  请求回来的是一个数据  进行table 表格渲染
const AttributesAttr = ref<getAttributesListArry>([]);

// 添加功能
const addAttributeFunction = () => {
  functionalJudgment.value = true;
  CategoryStore.Addshow = false;
  AttributesName.value = "";
  tableData.attrValueList = [];
};

// 添加功能的属性值
const addAttributeValue = () => {
  if (functionalJudgment.value) {
    const obj = { isEdit: true, valueName: '' };
    tableData.attrValueList.push(obj);
    nextTick(() => {
      Input.value.focus();
    });
  } else {
    //   "id": 34,
    //    "valueName": "JavaScript",
    //    "attrId": 37
    const obj: attrValueListobj = {
      attrId: tableData.attrValueList[0].attrId,
      valueName: "",
      id: tableData.attrValueList[0].id,
    };
    tableData.attrValueList.push(obj);
    nextTick(() => {
      Input.value.focus();
    });
  }
};

// 变成显示模式
const loseFocus = (row: attrValueListobj, index: number) => {
  // 判断是否输入内容
  if (!row.valueName) {
    // 没有内容，要删除当前行数据
    tableData.attrValueList.splice(index, 1);
    return;
  }
  // 有内容变成显示模式
  row.isEdit = false;
};

// span 进行数据修改 显示input
const showEdit = async (row: attrValueListobj) => {
  // row.valueName = row.valueName;
  row.isEdit = true;
  console.log(row.valueName);

  await nextTick();
  // 让输入框聚焦
  Input.value.focus();
}


// 保存发送添加或者修改请求
const savData = async () => {
  if (functionalJudgment.value) {
    tableData.attrName = AttributesName.value;
    tableData.categoryId = CategoryStore.category3Id as number;
    const newTableData = {
      attrName: tableData.attrName,
      attrValueList: tableData.attrValueList,
      categoryId: tableData.categoryId,
      categoryLevel: 3,
    };
    await addAttributesAttr(newTableData);
    sendRequest();
    CategoryStore.Addshow = true;
  } else {
    await reviseAttributesAttr(tableData);
    sendRequest();
    CategoryStore.Addshow = true;
  }
};

// 删除功能的  确定和取消回调
const confirmEvent = async (row: tableDataoArr) => {
  await deleteAttributesAttr(row.attrValueList[0].attrId as number);
  sendRequest();
};
const cancelEvent = () => {
  sendRequest();
};

// onUpdated(() => {
//   nextTick(() => {
//     Input.value.focus()
//   })
// })

/**
 * 监视小菠萝  pinia 中的 category3Id 第三个表单input 有值了 就发送请求渲染table 中的数据
 */
// 请求数据的发送请求

const sendRequest = async () => {
  const result = await getAttributesAttr(
    CategoryStore.category1Id as number,
    CategoryStore.category2Id as number,
    CategoryStore.category3Id as number
  );
  AttributesAttr.value = result;
};

watch(
  () => CategoryStore.category3Id,
  (newVa) => {
    if (!newVa) {
      AttributesAttr.value = [];
      return;
    }
    sendRequest();
  },
  {}
);
</script>

<style scoped>
.DownMargin {
  margin-bottom: 20px;
}

.spanwidth {
  display: inline-block;
  width: 100%;
}
</style>
